<template>
  <scroll-view
    :lower-threshold="threshold"
    class="wrapper"
    scroll-y="true"
    @scrolltolower="lower"
  >
    <view
      class="content"
      v-for="item in list"
      :key="item.id"
      @click="toShopDetail(item)"
    >
      <view class="left">
        <image class="img" :src="item.logo"></image>
      </view>
      <view class="right">
        <text class="title over">{{ item.brandsName }}</text>
        <text class="address over">地址: {{ item.positionCode }}</text>
      </view>
      <div class="activity">
        <image :src="'https://mini.jiaw.com/img/1078820211206.jpg'"></image>
      </div>
    </view>
  </scroll-view>
</template>

<script>
export default {
  props: {
    list: {
      type: Array
    }
  },
  data() {
    return {
      shopList: [],
      threshold: 150
    }
  },
  created() {},
  methods: {
    lower() {
      this.$emit('load')
    },
    toShopDetail(e) {
      uni.navigateTo({
        url: '/pages/package/shop/component/shop-detail?id=' + e.id
      })
    }
  }
}
</script>

<style lang="less" scoped>
.wrapper {
  margin-top: 70rpx;
  height: calc(100vh - 180rpx);
}

.content {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  height: 220rpx;
  border-bottom: 2rpx solid #eee;
  padding: 0 20rpx;
  position: relative;
  .left {
    .img {
      width: 150rpx;
      height: 150rpx;
    }
  }
  .right {
    flex: 1;
    display: flex;
    flex-direction: column;
    font-size: 32rpx;
    white-space: nowrap;
    width: 180rpx;
    padding: 0 30rpx;
    .over {
      text-overflow: ellipsis;
      overflow: hidden;
    }
  }
  .activity {
    image {
      width: 40rpx;
      height: 50rpx;
      margin-right: 30rpx;
    }
  }
}
</style>
